import classNames from 'classnames'
import './index.scss'
import { useMemo} from 'react'
import lodash from 'lodash'
import {billTypeToName} from '@/constant/index'
import { useState } from 'react'
import Icon from "@/component/Icon"
const DailyBill = ({date,billList}) => {
  const [isShow,setIsShow] = useState(false)
  //页面显示的数据
  const modelDate = useMemo(()=>{
    const pay = billList.filter(item=>item.type === 'pay').reduce((a,c)=>a + c.money,0)//收入
    const income = billList.filter(item=>item.type === 'income').reduce((a,c)=>a + c.money,0)//支出
    return {
      pay:lodash.round(pay,2),
      income:lodash.round(income,2),
      total:lodash.round(pay+income,2)
    }
  },[billList])

 
  return (
    <div className={classNames('dailyBill')}>
      <div className="header">
        <div className="dateIcon" onClick={()=>setIsShow(!isShow)}>
          <span className="date">{date}</span>
          <span className={classNames('arrow',{expand:isShow})}></span>
        </div>
        <div className="oneLineOverview">
          <div className="pay">
            <span className="type">支出</span>
            <span className="money">{modelDate.pay}</span>
          </div>
          <div className="income">
            <span className="type">收入</span>
            <span className="money">{modelDate.income}</span>
          </div>
          <div className="balance">
            <span className="money">{modelDate.total}</span>
            <span className="type">结余</span>
          </div>
        </div>
      </div>
     <div className="billList" style={{display:isShow?'block':'none'}}>
       {billList.map(item => {
         return (
           <div className="bill" key={item.id}>
             <Icon type={item.useFor}/>
             <div className="detail">
               <div className="billType">
                  {billTypeToName[item.useFor]}
               </div>
             </div>
             <div className={classNames('money', item.type)}>
               {item.money.toFixed(2)}
             </div>
           </div>
         )
       })}
     </div>
     
    </div>
  )
}
export default DailyBill